<template>
  <div class="app-dashboard">
    <a-row type="flex">
      <a-col flex="auto">
        <new-task :loading="loading" />
        <order-overview :loading="loading" />
        <short-cut :loading="loading" />
        <marketing />
        <advice />
        <service />
      </a-col>
      <a-col flex="260px">
        <News />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import NewTask from './components/NewTask.vue'
import Marketing from './components/Marketing.vue'
import OrderOverview from './components/OrderOverview.vue'
import ShortCut from './components/ShortCut.vue'
import Service from './components/Service.vue'
import Advice from './components/Advice.vue'
import News from './components/News.vue'

export default defineComponent({
  name: 'Dashboard',
  components: {
    NewTask,
    OrderOverview,
    Marketing,
    ShortCut,
    Service,
    Advice,
    News,
  },
  setup() {
    const loading = ref(true)

    setTimeout(() => {
      loading.value = !loading.value
    }, 300)

    return {
      loading,
    }
  },
})
</script>

<style lang="scss">
.app-dashboard {
  .ant-card {
    margin-bottom: 15px;
    color: #666;

    .ant-btn {
      margin-left: 15px;
    }

    .ant-col-5 {
      max-width: 20%;
    }
  }
}
</style>
